/*!
 * run with Gulp 4
 * install ruby https://rubyinstaller.org/downloads/
 * gem install sass
 * $ cnpm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano jshint gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del gulp-file-include --save-dev
 * https://markgoodyear.com/2014/01/getting-started-with-gulp/
 * npm install http-server -g
 * start http-server -i -p 8081
 */

// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),//install ruby and run:gem install sass
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    fileinclude = require('gulp-file-include'),
    livereload = require('gulp-livereload'),
    del = require('del');

// Html
gulp.task('html', function() {
    return gulp.src('src/**/*.html')
        .pipe(fileinclude({
            prefix: '@@',//变量前缀 @@include
            basepath: './src/_include',//引用文件路径
            indent:true//保留文件的缩进
        }))
        .pipe(gulp.dest('dist/'));
});

// Styles
gulp.task('styles', function() {
    return sass('src/styles/*.scss', { style: 'expanded' })
        .pipe(autoprefixer('last 2 version'))
        .pipe(gulp.dest('dist/styles'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(cssnano())
        .pipe(gulp.dest('dist/styles'))
        .pipe(notify({ message: 'Styles task complete' }));
});

// Scripts
gulp.task('scripts', function() {
    return gulp.src('src/scripts/**/*.js')
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('dist/scripts'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/scripts'))
        .pipe(notify({ message: 'Scripts task complete' }));
});

// Images
gulp.task('images', function() {
    return gulp.src('src/images/**/*')
        .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
        .pipe(gulp.dest('dist/images'))
        .pipe(notify({ message: 'Images task complete' }));
});

// Clean
gulp.task('clean', function() {
    return del(['dist','dist/styles', 'dist/scripts', 'dist/images']);
});

// Default task
gulp.task('default',
    gulp.series('clean', 'html','styles', 'scripts', 'images'));

// Watch
gulp.task('watch', function() {
    // Watch .html files
    gulp.watch('src/**/*.html', gulp.series('html'));

    // Watch .scss files
    gulp.watch('src/styles/**/*.scss', gulp.series('styles'));

    // Watch .js files
    gulp.watch('src/scripts/**/*.js', gulp.series('scripts'));

    // Watch image files
    gulp.watch('src/images/**/*', gulp.series('images'));

    // Create LiveReload server
    livereload.listen();

    // Watch any files in dist/, reload on change
    gulp.watch(['dist/**']).on('change', livereload.changed);

});